<template>
  <div class="Tabs">

    <ul class="cards" ref="cards"
        :class="[ Cardactived ?'transition':'', '']">
      <li class="title">
        <h2></h2>
      </li>
      <li class="card card-1 background-fill"
          @click="sl">
        <img src="./assets/img/01.jpg">
        <div class="content">
          <p>矢量</p>
        </div>
      </li>
      <li class="card card-2 background-fill" @click="chooseLayer">
        <img src="./assets/img/02.jpg">
        <div class="content">
          <p>遥感图像</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import $ from "jquery/dist/jquery"
import {addTianlayer} from "@/api/CesiumUtils";
export default {
  name: "baseLayerTabs",
  data(){
    return{
      Cardactived:false
    }
  },
  mounted() {
    $(document).ready(function ($) {
      $('ul.cards').on('mouseover mouseout', function () {
        $(this).toggleClass('transition');
      });
    });
  },
  methods:{
    chooseLayer(){
     this.$emit('sllayeradd')
    },
    sl(){
      this.$emit('sl')
    }
  }
}
</script>

<style lang="scss" scoped>
.Tabs{
  ul.cards {
    width: 75px;
    margin: 0 auto 20px;
    height: 75px;
    list-style-type: none;
    position: relative;
    padding: 10px 0;
    cursor: pointer;
  }
  ul.cards li.title {
    margin: 0 0 20px;
  }
  ul.cards li.title h2 {
    font-weight: 700;
  }
  ul.cards li.card {
    background-image: url("./assets/img/bg.png");
    overflow: hidden;
    background-size: 100% 100%;
    height: 45px;
    width: 75px;
    border-radius: 5px;
    position: absolute;
    left: 0px;
    box-shadow: 1px 2px 2px 0 #aaa;
    -webkit-transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12);
    transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12);
  }
  ul.cards li.card img {
    max-width: 100%;
    padding: 5px;
    height: auto;
  }
  ul.cards li.card div.content {
    padding: 5px 10px;
  }
  ul.cards li.card.card-1 {
    z-index: 10;
    -webkit-transform: rotateZ(-2deg);
    transform: rotateZ(-2deg);
  }
  ul.cards li.card.card-2 {
    z-index: 9;
    -webkit-transform: rotateZ(-7deg);
    transform: rotateZ(-7deg);
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
  }
  ul.cards li.card.card-3 {
    z-index: 8;
    -webkit-transform: rotateZ(5deg);
    transform: rotateZ(5deg);
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
  }
  ul.cards.transition li.card {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  ul.cards.transition li.card.card-1 {
    left: 0px;
  }
  ul.cards.transition li.card.card-2 {
    left: -90px;
  }
}
</style>